<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>管理员入口</title>

</head>
<body>

<style>


    .containerT {
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        border-radius: 5%;
        background-color: rgba(255, 255, 255, 0.78);
        transform: translate(-50%, -50%);
        padding: 20px;
        width: fit-content;
    }

    body {
        background-color: #e8e9f5
    }

    a {
        text-decoration: none;
        font-size: 20px;
        color: #4d90fe;
    }

    .bt {
        background: #287CD4;
        color: #fff;
        border: 0;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        font-size: 100%;
        align-items: flex-start;
        text-align: center;
        cursor: default;
        box-sizing: border-box;
        border-style: outset;
        text-decoration: none;
        padding: 5px 6px;
        margin: 5px;
        display: inline-block;
    }

    .line {
        height: 1px;
        background-color: gainsboro;
        text-align: center;
        margin: 20px;
    }

    select {
        width: 80%;
        height: 40px;
        font-size: 20px;
        border: 1px solid rgba(161, 164, 163, 0.5);
        text-align: center;
        text-align-last: center;
    }

    h5 {
        font-size: x-small;
    }

</style>


<script src="//cdn.staticfile.org/jquery/2.1.0/jquery.js"></script>


<div class="containerT">
    <%--我所支持的操作面板--%>
    <div style="display: block" class="mypanel my-opes-panel">

        <h3>
            我的操作
        </h3>

        <div class="opes">
        </div>

        <a class="bt apply-for-manager" style="margin-top: 30px">申请管理员权限</a>
    </div>


    <%--申请权限面板--%>
    <div style="display: none;" class="mypanel apply-for-manager-panel">

        <style>
            .close {
                text-align: right;
            }
        </style>

        <div class="close">
            <span class="close-bt">
                <svg t="1553265629244" class="icon" style="" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="1877"
                     width="20" height="20"><defs><style type="text/css"></style></defs><path
                        d="M567.001395 495.286374 966.070272 96.236851c10.904781-10.905395 10.904781-28.573798 0-39.481242-10.907853-10.905395-28.575949-10.905395-39.482778 0L527.519539 455.806157 128.45271 56.75561c-10.905805-10.905395-28.574925-10.905395-39.481754 0-10.906829 10.906419-10.906829 28.574822 0 39.481242l399.067955 399.049523L88.970957 894.337946c-10.906829 10.906419-10.906829 28.573798 0 39.480218 5.45239 5.452186 12.652646 8.177254 19.741389 8.177254 7.197184 0 14.285926-2.725069 19.740365-8.177254l399.065907-399.052595L926.587494 933.818061c5.454438 5.452186 12.652646 8.177254 19.740365 8.177254 7.198208 0 14.28695-2.725069 19.742413-8.177254 10.904781-10.906419 10.904781-28.573798 0-39.480218L567.001395 495.286374z"
                        p-id="1878" fill="#515151"></path></svg>
            </span>
        </div>

        <%--可供选择的管理员权限罗列--%>

        <h5>权限</h5>
        <label>
            <select class="authority-input" onblur="window.scroll(0,0)">
                <option class="authority_ROLE_MANAGER_ORDER" value="manager_order">
                    订单管理员
                </option>
            </select>
        </label>

        <div class="line">
        </div>

        <h5>申请正文</h5>
        <label>
            <textarea
                    class="text-input"
                    style="width: 90%;height: 100px;    border: 1px solid rgba(161, 164, 163, 0.5);resize: none"></textarea>
        </label>
        <a class="bt apply-for-manager submit" style="margin-top: 30px">提交申请</a>
        <script>


            let text = $('.text-input');
            text.bind('input', function () {

                //限制输入字数
                if (text.val().length > 50) {
                    text.val(text.val().substr(0, 50));
                }

            });

            $('.bt.apply-for-manager.submit').click(function () {

                //获取两个输入的内容,向admin用户发起权限申请
                let ai = $('.authority-input');
                let ti = text;
                let a = ai.val();
                let t = ti.val();
                $.post('/ua/manager/apply-for-manager', {authority: a, text: t}, function () {
                    ai.val('manager_order');
                    ti.val('');
                    alert('已发起申请,等待admin管理员审批');
                }).error(function (err) {
                    alert(err);
                });

            });

        </script>
    </div>

</div>


<script>


    //当点击申请成为管理员的时候
    $('.apply-for-manager').click(function () {

        /*隐藏所有面板*/
        $('.mypanel').hide();

        /*展示申请权限的面板*/
        $('.apply-for-manager-panel').show();

    });

    $('.close-bt').click(function () {

        $('.mypanel').hide();
        $('.my-opes-panel').show();


    });


    //声明一个权限map

    let authoritiesMap = {  //href管理界面地址   text显示的文本

        "ROLE_MANAGER_ORDER": {
            text: "订单管理",
            href: "/ua/manager/order"
        },

        "ROLE_ADMIN": {
            text: "超级管理员",
            href: "/ua/manager/admin"
        }

    };


    function addOpe(a) {

        if (authoritiesMap[a]) {
            $('.opes').append(' <div style="margin-top: 5px"><a  href=' + authoritiesMap[a].href + '>' + authoritiesMap[a].text + '</a></div>');
        }


    }


    //遍历当前用户的所有权限
    <c:forEach items="${authorities}" var="a">


    /*把支持的操作以a标签插入*/
    addOpe('${a.authority}');

    //当前用户已经具备的权限无须重复申请

    $('.authority_' + '${a.authority}').remove();


    </c:forEach>


    //判断如果没有需要申请的权限,就把申请按钮隐藏

    let len = $('.authority-input').children('option').length;

    if (len === 0) {
        $('.bt.apply-for-manager').remove();
    }


</script>

</body>

</html>